<div id="timeBoardPage">
	<div>
		<div style="border-top: 1px solid #D9DFE5;" id="jGridForGroupProductionOrders"></div>
	</div>
	<div style="margin-top: 3px;">
		<div id="jGridForProductionControls"></div>
	</div>
</div>
<style>
#jGridForGroupProductionOrders .pageBar {
}
</style>
<script>
(function($){
	var $page = DWZ.context(), 
	$grid = $('#jGridForGroupProductionOrders', $page),
	$detailGrid = $('#jGridForProductionControls', $page),
	dateFmt = 'yyyy-MM-dd', timeFmt = 'yyyy-MM-dd HH:mm:ss',
	orderLayoutH = 90, orderReLayoutH = 220,
	controlLayoutH = 350, controlReLayoutH = 60,
	condition = JSON.parse('<#noescape>${condition!"[]"}</#noescape>'),
	ecodes = JSON.parse('<#noescape>${ecodes!"[]"}</#noescape>'),
	status = "${status!''}",
	
	orderColumns = [
		{field: '_index', text: '<@label key="serialNumber.C">序号</@label>', width: 10},
		{field: 'productionControlNum', text: "<@label key='productionControlNum.C,colon'>生产管理号：</@label>", width: 60},
		{field: 'statuseCode', text: "<@label key='orderStatusECode.C'>订单状态</@label>", width: 30, transform: function(value) {
			var text = '';
			$.each(ecodes, function(){
				if (value == this.eCode) {
					text = this.eCodeText;
				}
			});
			return text || value;
		}},
		{field: 'workCenterCode', text: "<@label key='workCenter.C,colon'>工作中心：</@label>", width: 40},
		{field: 'workCenterText', text: "<@label key='workCenterText.C'>工作中心名称</@label>", width: 60},
		{field: 'materialCode', text: "<@label key='materialCode.C'>物料编号</@label>", width: 40},
		{field: 'materialText', text: "<@label key='materialText.C'>物料名称</@label>", width: 60},
		{field: 'plannedQuantity', text: "<@label key='plannedQuantity.C'>计划数量</@label>", width: 30},
		{field: 'completedQuantity', text: "<@label key='completedQuantity.C'>完工数量</@label>", width: 30},
		{field: 'scrappedQuantity', text: "<@label key='scrappedQuantity.C'>报废数量</@label>", width: 30},
		{field: 'repairQuantity', text: "<@label key='repairQuantity.C'>返修数量</@label>", width: 30},
		{field: 'actualstartDateTime', type: 'date', text: "<@label key='actualstartDateTime.C'>实际开始时间</@label>", width: 80},
		{field: 'actualendDateTime', type: 'date', text: "<@label key='actualendDateTime.C'>实际结束时间</@label>", width: 80},
		{field: 'processCode', text: "<@label key='cmprocess_code.C'>工艺编号</@label>", width: 40}
	],
	
	controlColumns = [
		{field: '_index', text: '<@label key="serialNumber.C">序号</@label>', width: 10},
		{field: 'confirmDateTime', type: 'date',format: dateFmt, text: "<@label key='confirmDateTime.C'>报工日期</@label>", width: 60},
		{field: 'confirmUser', text: '<@label key="confirmUser.C">报工人</@label>', width: 40},
		{field: 'completedQuantity', text: "<@label key='completedQuantity.C'>完工数量</@label>", width: 30},
		{field: 'scrappedQuantity', text: "<@label key='scrappedQuantity.C'>报废数量</@label>", width: 30}
	];
	
	$grid.jGrid({
		height: 220,
		layoutH: orderLayoutH,
		width: 1500,
		base: hostUrl + '/productionControlStatus/',
		url: 'getProductionControlsByStatus',
		//autoLoad: false,
		columns: orderColumns,
		orderable: false,
		hasBorder: true,
		getQueryData: function() {
			return $.extend(condition, {status: status});
		},
		gridbars: [
			{icon: 'export', text: '<@label key="exportToExcel.D">导出</@label>', title: '<@label key="confirmexportToExcel.M"></@label>', 
				target: 'export', href: 'exportControlsToExcel', data: {statusECode: status}, menuCode: 'excel_export', valid: function() {
					if ($('tbody>tr .noData', $grid).length) {
						alertMsg.error('没有可导出的数据！');
						return false;
					}
					return true;
				}}
		]
	});
	
	var productionControlNum = '';
	
	$('tbody', $grid).on('click', 'tr', function() {
		var $tr = $(this);
		productionControlNum = $tr.data().productionControlNum;
		$detailGrid.jGrid('loadData', {controlNum: productionControlNum});
		toggleGrid(false);
	});
	
	$detailGrid.jGrid({
		layoutH: controlLayoutH,
		width: 868,
		base: hostUrl + '/productionControlStatus/',
		url: 'getControlConfirmByControlNum',
		autoLoad: false,
		columns: controlColumns,
		hasBorder: true,
		getQueryData: function() {
			return {productionControlNum: productionControlNum};
		},
		gridbars: [
			{icon: 'open', text: '展开列表', title: '展开列表', target: 'action', action: function() {
				expandDetailGrid();
			}},
			{icon: 'export', text: '<@label key="exportToExcel.D">导出</@label>', title: '<@label key="confirmexportToExcel.M"></@label>', 
				target: 'export', href: 'exportconfirmToExcel', menuCode: 'excel_export', valid: function() {
					if ($('tbody>tr .noData', $detailGrid).length) {
						alertMsg.error('没有可导出的数据！');
						return false;
					}
					return true;
				}}
		],
		orderable: false,
		trselectable: false
		//显示分页 ,pageable: false  
	});
	
	var $cosIcon = $('<li class="" style="float: right;"><a target="" href="javascript:void(0);" class="expand"><span></span></a></li>')
	.appendTo($('<ul class="toolBar"/>').appendTo($('.panelBar', $detailGrid))).on('click', function(){
		toggleGrid(true);
	}),
	
	toggleGrid = function(isDisplay) {
		var $gridPart = $('.gridPart', $grid), $tbody = $('.gridBody', $gridPart);
		if (isDisplay) {
			resizeDetailGrid();
			$grid.parent().slideDown('fast');
			$gridPart.animate({height: $page.height() - 106}, 'fast', function(){
				$gridPart.attr({layoutH: 63});
				$tbody.attr({layoutH: 106});
				$detailGrid.hide();
				refreshDialog();
			});
		} else {
			$gridPart.removeAttr('layoutH').animate({height: 200}, 'fast', function(){
				$tbody.removeAttr('layoutH').height(158);
				$('.gridScrollerBar>div', $detailGrid).height(1);
				$detailGrid.fadeIn(20);
			});
		}
	},
	
	expandDetailGrid = function() {
		var $p = $grid.parent(), $gridPart = $('.gridPart', $detailGrid), $tbody = $('.gridBody', $detailGrid);
		$p.slideUp('falst');
		$gridPart.attr({layoutH: 38}).animate({
			height: $page.height() - 77
		}, 'falst');
		$tbody.attr({layoutH: 76}).height($page.height() - 120);
	},
	
	resizeDetailGrid = function() {
		var $gridPart = $('.gridPart', $detailGrid), $tbody = $('.gridBody', $detailGrid);
		$detailGrid.css('margin-top', '3px');
		$gridPart.attr({layoutH: 299});
		$tbody.attr({layoutH: 342});
		refreshDialog();
	},
	refreshDialog = function() {
		//$.pdialog.refreshDialog($page);
	};
})(jQuery);
</script>